<template>
  <div>
    <!-- {{ loginForm.code }} <br />
    {{ loginForm.state }} <br />
    {{ loginForm.appid }} <br />
    {{ isexist }} <br />
    {{ form.wxuserId }} -->
    <div class="modelDiv">
      <a-modal v-model="modalVisible" :closable="false" :maskClosable="false" centered width="450px" okText="绑定" @cancel="wechatCancel" @ok="wechatBinding">
        <div style="display: flex; color: #317de7">
          <a-icon type="exclamation-circle" theme="outlined" :style="{ fontSize: '50px', margin: '5px 10px 0 0 ' }" />
          <span>检测到您的企业微信未绑定账号。<br />请输入用户名密码进行绑定企业微信操作，便于下次可直接扫码登录。</span>
        </div>
        <br />
        <a-form-model-item prop="username">
          <a-input autocomplete="autocomplete" size="large" placeholder="请输入用户名" v-model="form.username">
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password size="large" placeholder="请输入密码" autocomplete="autocomplete" v-model="form.password">
            <a-icon slot="prefix" type="lock" />
          </a-input-password>
        </a-form-model-item>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { WXLogin, WXBinding, getRoutesConfig } from '@/services/user';
import { setAuthorization } from '@/utils/request';
import { timeFix, sortMenu, sortPermission } from '@/utils/common';
import { loadRoutes } from '@/utils/routerUtil';
import { setStore } from '@/utils/store';
import { mapMutations } from 'vuex';

export default {
  name: 'WeChatLogin',
  data() {
    return {
      modalVisible: false,
      form: {
        username: '',
        password: '',
        wxuserId: '',
      },
      loginForm: {
        code: this.$route.query.code,
        state: this.$route.query.state,
        appid: this.$route.query.appid,
      },
      isexist: '',
      accessToken: '',
    };
  },
  mounted() {
    this.wechatLogin();
  },
  methods: {
    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles', 'setIconMap']),
    wechatLogin() {
      console.log('wechatLogin');
      this.loading = true;
      WXLogin(this.loginForm).then((res) => {
        //   this.$router.push({path:this.redirect || '/'})
        if (res.data.code == 0) {
          this.isexist = res.data.data.isexist;
          this.form.wxuserId = res.data.data.wxuserId;
          console.log(this.isexist);
          console.log(this.form.wxuserId);
          if (this.isexist == 9) {
            this.modalVisible = true;
          } else {
            this.afterLogin(res);
          }
        }
      });
    },
    wechatBinding() {
      WXBinding(this.form).then((res) => {
        if (res.data.code == 0) {
          this.modalVisible = false;
          this.afterLogin(res);
        } else {
          this.$message.error(res.data.message);
          this.wechatCancel()
        }
      });
    },
    wechatCancel(){
      this.$router.go(-1)
    },
    afterLogin(res) {
      this.logging = false;
      const loginRes = res.data;
      if (loginRes.code == 0) {
        setAuthorization({ token: loginRes.data.accessToken });
        const userInfo = loginRes.data.userInfo;
        console.log(userInfo);
        //存入用户信息
        this.setUser(userInfo);
        // 获取路由配置
        getRoutesConfig().then((res) => {
          console.log(res);
          if (res.data.data.length == 0) {
            this.$message.error('账号未授权');
            this.wechatCancel()
            return false;
          }
          this.setIconMap(res.data.data);
          //整理菜单和权限数据
          let routesConfig = sortMenu(res.data.data);
          let permissionConfig = sortPermission(res.data.data);
          this.setPermissions(permissionConfig);
          loadRoutes(routesConfig);
          console.log(permissionConfig);
          let firstPage = routesConfig[0].children[0].children[0]
            ? `${routesConfig[0].children[0].router}/${routesConfig[0].children[0].children[0]}`
            : routesConfig[0].children[0].router;
          console.log(firstPage);
          setStore({
            name: 'firstMenuId_' + userInfo.id,
            content: firstPage,
          });
          this.$router.push(firstPage);
          this.$message.success(timeFix() + '，欢迎回来', 3);
        });
      } else {
        this.alertShow = true;
        this.error = loginRes.message;
        this.form.vercode = '';
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-content {
  height: 330px;
}

/deep/.ant-modal-footer {
  border: none !important;
  text-align: center;
  .ant-btn {
    margin: -50px 20px 30px 20px;
    height: 41px;
    width: 110px;
  }
}
/deep/ .ant-input {
  height: 45px;
  font-size: 14px;
}
</style>